<script>
import MyCount from "@/components/Count.vue";
export default {
  name: 'App',
  components: {MyCategory: MyCount},
  data(){
    return {
      foodList:["火锅","牛排","小龙虾","烧烤"],
      gameList:["英雄联盟","DOTA2","王者荣耀","穿越火线"],
      filmList:["《唐顿庄园》","《唐顿庄园2》","《唐顿庄园3》","《唐顿庄园4》"]
    }
  }
}
</script>

<template>
  <div class="app">
    <MyCategory content="美食" :dataList = "foodList">
      <img src="../../Vue的生命周期/Vue生命周期中的_挂载流程.png" alt="图片不见了" slot = "head">
      <template v-slot:foot>
        <a href="https://www.baidu.com" >点我跳转到百度</a>
        <br>
        <a href="https://www.jingdong.com">点我跳转到京东</a>
      </template>
    </MyCategory>


    <MyCategory content="游戏" :dataList = "gameList">
      <ul slot = "head">
        <li v-for="(item,index) in gameList" :key="index">
          {{item}}
        </li>
      </ul>
    </MyCategory>



    <MyCategory content="电影" :dataList = "filmList">
      <video slot = "head" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"> </video>
    </MyCategory>
  </div>
</template>

<style>
.app{
  display: flex;
  justify-content: space-around;
}
</style>

